---
type: integration
title: '@astrojs/vue'
description: Aprende a usar la integración de framework @astrojs/vue para extender el soporte de componentes en tu proyecto Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Esta **[integración de Astro][astro-integration]** permite el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes [Vue 3](https://vuejs.org/).

## Instalación

Astro incluye un comando `astro add` para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual) en su lugar.

Para instalar `@astrojs/vue`, ejecuta lo siguiente desde el directorio de proyecto y sigue las instrucciones:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add vue
  ```
  </Fragment>
</PackageManagerTabs>

Si tienes algún problema, [no dudes en informarnos en GitHub](https://github.com/withastro/astro/issues) e intenta los pasos de instalación manual a continuación.

### Instalación manual

Primero, instala el paquete `@astrojs/vue`:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/vue
  ```
  </Fragment>
</PackageManagerTabs>


La mayoría de los gestores de paquetes también instalarán las dependencias asociadas.  Sin embargo, si ves un aviso "No se puede encontrar el paquete 'vue'" (o similar) al iniciar Astro, tendrás que instalar Vue:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install vue
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add vue
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add vue
  ```
  </Fragment>
</PackageManagerTabs>

Luego, aplica la integración a tu archivo `astro.config.*` usando la propiedad `integrations`:

```js ins={2} ins="vue()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});
```

## Empezando

Para usar tu primer componente Vue en Astro, dirígete a nuestra [documentación de frameworks UI][astro-ui-frameworks]. Explorarás:

* 📦 como se cargan los componentes de framework,
* 💧 opciones de hidratación del lado del cliente, y
* 🤝 oportunidades para mezclar y anidar frameworks juntos

## Solución de problemas

Para obtener ayuda, consulta el canal `#support` en [Discord](https://astro.build/chat). ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra [documentación de integración de Astro][astro-integration] para obtener más información sobre las integraciones.

## Contribuyendo

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

[astro-integration]: /es/guides/integrations-guide/

[astro-ui-frameworks]: /es/guides/framework-components/#usando-componente-de-framework

## Opciones

Esta integración está impulsada por `@vitejs/plugin-vue`. Para personalizar el compilador de Vue, se pueden proporcionar opciones a la integración. Consulta la [documentación](https://www.npmjs.com/package/@vitejs/plugin-vue) de `@vitejs/plugin-vue` para obtener más detalles.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
    template: {
      compilerOptions: {
        // trata cualquier etiqueta que comience con ion- como elementos personalizados
        isCustomElement: tag => tag.startsWith('ion-'),
      },
    },
    // ...
    }),
  ],
});
```

### appEntrypoint

Puedes extender la instancia de Vue `app` configurando la opción `appEntrypoint` a un especificador de importación relativo a la raíz (por ejemplo, `appEntrypoint: "/src/pages/_app"`).

La exportación predeterminada de este archivo debe ser una función que acepte una instancia de Vue `App` antes de la representación, lo que permite el uso de [plugins Vue personalizados](https://vuejs.org/guide/reusability/plugins.html), `app.use` y otras personalizaciones para casos de uso avanzados.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
```

```ts title="src/pages/_app.ts"
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};
```

### jsx

Puedes usar Vue JSX configurando `jsx: true`.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});
```

Esto habilitará el renderizado para componentes Vue y Vue JSX. Para personalizar el compilador Vue JSX, pase un objeto de opciones en lugar de un valor booleano. Consulta la [documentación](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) de `@vitejs/plugin-vue-jsx` para obtener más detalles.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // trata cualquiere etiqueta que comience con ion- como elementos personalizados
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});
```
